<template>
  <div :id="props.BiaoId" class="w-100 h-100"></div>
</template>
<script setup lang="ts">
// import option from '@/assets/element-plus/es/components/select/src/option.mjs';
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
type EChartsOption = echarts.EChartsOption;

const props = defineProps({
  BiaoId: {
    type: String,
    default: "echatrsid",
  },
  optionData: {
    type: Array,
    default: () => {
      [];
    },
  },
});
let myChart:any=null
onMounted(async () => {
  let yAxisData: string[] = [];
  let xAxisData: any[] = [];
  let dataSlice = props.optionData.slice(0, 6);
  const comoputeColor = (e: any) => {
    switch (e) {
      case 1:
        return "#d390e1";
        // return "#a5e190";

        break;
      case 2:
        return "#e19a90";
        break;
      case 3:
        return "#57a3f3";
        break;
      case 4:
        return "#f90";
        break;
      case 5:
        return "#ffc107";
        break;
      case e >= 6:
        return "#a5e190";
        break;
    }
  };
  const comoputeValue= (e: any) => {
    switch (e) {
      case 1:
        return "17%";
        break;
      case 2:
        return "33%";
        break;
      case 3:
        return "50%";
        break;
      case 4:
        return "67%";
        break;
      case 5:
        return "#ffc107";
        break;
      case e >= 6:
        return "#7cef14";
        break;
    }
  };
  dataSlice.forEach((item) => {
    yAxisData.push((item as any).name);
    console.log(yAxisData,'yAxisData');
    
    xAxisData.push({
      value: (item as any).value,
      itemStyle: {
        color: comoputeColor((item as any).value),
      },
    });
  });
  console.log(yAxisData, "yAxisData");

  myChart= echarts.init(
    document.getElementById(props.BiaoId) as HTMLElement
  );
  let option = {
    tooltip: {
      trigger: 'item'
    },
    grid: {
      left: "0%", //默认10%
      right: "3%", //默认10%
      top: "0%", //默认10%
      bottom: "8%", //默认60
      containLabel: true,
      //grid区域是否包含坐标轴的刻度标签
    },
    xAxis: {
      type: "value",
      minInterval: 1,   
      // show:false,
    },
    yAxis: {
      min:0,
      type: "category",
      data: yAxisData,
 
    },
    series: [
      {
        data: xAxisData,
        type: "bar",
        itemStyle: {
          normal: {
            barBorderRadius: [0, 8, 8, 0],
          },
        },
      },
    ],
  };
  myChart.setOption(option);

  window.onresize = function () {
    //自适应大小
    myChart.resize();
  };
});
onBeforeUnmount(() => {
  // 销毁 ECharts 实例
  if (myChart) {
    myChart.dispose();
  }
});
</script>
<style lang="scss"></style>
